bring Five Alive: HTML5视频部署的最佳实践

HTML5使组织能够利用开放标准和流媒体视频，而无需依赖第三方播放器或插件. An MPEG/H.264, Ogg/Theora, 或WebM/VP8视频都可以在标准的web浏览器中播放, whether it is a PC, Mac, Linux, iOS, or Android device.

这让企业有机会制定针对所有流行平台和设备的媒体战略，而不必为每个平台和设备创建单独的模型. HTML5 presents this opportunity, with its pros and cons, 对于企业来说，利用并接触到多种格式和多种平台的观众.

从技术上讲，HTML5定义了一种使用video元素的简单方法. However, 对该元素的支持并非无处不在, 有时要理解它的好处以及它的实施是令人生畏的.

本文的目的是介绍使用HTML5视频的最佳实践. 本文的目标读者是业务用户和技术用户. 先决条件是一些视频工作背景和创造最佳观看体验的愿望.

这些最佳实践将帮助企业理解技术, develop the right media strategy, 并为快乐的观众提供健壮的应用程序.

The Big Picture: Why HTML5?
For an online media presence, 一个组织需要一个显示常规内容的丰富网站, RIA(富互联网应用程序)内容, and media content. 虽然常规内容是用标准HTML呈现的，但其他两个部分带有选项. Silverlight和Flash都为开发人员提供了创建RIA的框架, 以及构建视频播放器来传输视频内容. 对于iOS和Android等操作系统，有Apple SDK和Android SDK. 这需要企业学习每个SDK, 分析每个目标屏幕(计算机), mobile, STB) separately, 并为每一个开发和维护单独的代码库.

HTML5试图提供部分或全部的替代方案. 无需安装第三方运行时，就可以在HTML5中提供RIA内容和媒体内容. 请注意，这并不意味着它总是最好的选择, 但它确实提供了一个公分母.

HTML5最有趣的方面是如何最好地利用它在web浏览器中播放媒体内容的能力. HTML5在这里的影响是最大的，这将是本文的主要关注点. 本文的其余部分将列出可以是战略的和技术的最佳实践. 虽然没有必要把它们都读一遍，但还是建议你从整体上看. At the end of the article, 还有一个示例演示站点的链接，该站点描述了本文中的一些概念. (The code can be reused freely; I’d appreciate a note with any comments.)

Future of HTML5: The Ecosystem
In reality, HTML5的成功很大程度上取决于Adobe之间的生态系统如何演变, Google, W3C (World Wide Web Consortium), Microsoft, Mozilla, MPEG LA, etc. 而W3C最终定义了HTML5的规范, 这取决于提供浏览器的组织, codecs, frameworks, 以及推动技术使用和普及的应用程序.

到目前为止，业界采用HTML5的方式有利有弊. Let’s review some facts:

•虽然Silverlight是微软的旗舰选择，但IE9将支持HTML5视频. 看看这在Silverlight中是如何实现的将会很有趣.
•HTML5规范是由谷歌员工撰写的. 谷歌也一直在推广其开源的WebM. 总之，这为高质量的流媒体提供了一个强有力的选择.
• HTML5 is promoted by Apple. 苹果不支持Flash，也没有这样做的计划. 这对于未来HTML5的采用和新工具的开发来说是个好消息.
•Adobe计划在Flash中支持WebM. 看到越来越流行的开源编解码器对HTML5和Flash本身的影响将会很有趣.
•RIA领域由Flash和Silverlight平台主导，用于网络媒体应用. HTML5仍然需要不断发展并得到更广泛的采用. 一个经典的例子是SVG(可缩放矢量图形)，它是几年前发布的. 虽然它是一个功能强大的图形工具，但它的采用却相当缓慢.

When designing a media strategy, 牢记这些因素并据此决定如何瞄准市场是很重要的. For example, for a large media enterprise, 不管编解码器是什么，重要的是要有一个有效的媒体存在, browser, or device. 因此，企业需要为其用户提供最大限度的应用程序，以避免生态系统产生的任何不兼容性.

HTML, Flash, or Silverlight?

HTML5被视为Flash或Silverlight的替代品, 但它的有效性实际上取决于你想要达到的目标. 有时需要混合使用多种技术. 如果企业需要利用已经在Flash中构建的现有应用程序, 除了采用HTML5标准外，我们的策略可能是继续利用这一点. 这些技术成为互补而不是竞争. 如果一个企业是从头开始的，并希望使用开源标准, 方法可能是专门使用HTML5. 这与已经在基于flash的RIA和视频播放器上投入大量资金的组织是完全不同的.

我的移动设备策略应该是什么?
HTML5视频对于不支持Flash的流行iOS设备来说尤为重要. The call for HTML5 is loudest here; in non-iOS devices, HTML5只是一个选择，因为大多数浏览器都有第三方插件. 以前面的一个企业为例，它已经在使用Flash或Silverlight的计算机上有了足够的影响力, 企业可能不需要在这方面进行投资，而是只在iOS设备上扩展HTML5.

iOS应用开发者可以使用HTML5来开发视频应用，而不是iOS SDK. HTML5应用程序可以直接在设备中添加书签并提供视频播放, 就像普通的App Store应用程序一样. 这能够更好地控制玩家的功能, 提供与社交网络分享和观看评级等功能. YouTube的HTML5网站就是一个很好的例子.

我应该瞄准什么样的容器格式?
HTML5视频有利有弊. 在它被广泛采用之前，不会有单一的浏览器支持所有的编解码器. 除非目标设备只运行iOS, 视频应该以不同的格式编码，以最大限度地扩大覆盖面.

在大多数浏览器和设备中可以覆盖的三种格式是WebM, Ogg, and MP4 for on-demand streaming. For live streaming, WebM, Ogg, FLV, 和mpegts(传输流)应该为所有设备和浏览器提供必要的访问.

如何提供跨浏览器兼容性?
首先要确保浏览器支持HTML5的视频元素. As of this writing, 每个主流浏览器至少有一个最新版本——ie, Firefox, Safari, Chrome, Chromium, Opera, iOS, and Android—supports it. 但早期版本并非如此.

直到组织和用户将浏览器更新到支持的版本, 由于只有最新版本支持视频元素，因此覆盖范围有限. 据统计，兼容html5的浏览器的安装基础只有大约40%-50%. 对于一个覆盖所有屏幕的企业, 最好有一个备用计划，使用其他流行的播放器，如Flash. (请注意，在64位浏览器中，如Minefield, HTML5 is the only option; Flash and Silverlight don’t support 64-bit browsers as of this writing.)

以下是我测试的浏览器当前对每个容器格式的32位浏览器支持，并且不需要安装插件(我没有测试IE), so I haven’t included it here):

如果目标是Firefox，则支持Ogg和WebM. But if the browser is Safari, 这是有用的，也有相同的视频编码在MP4，以提供一个后备选项播放Ogg. 此外，可以看到，在MP4和Ogg或MP4和WebM之间，涵盖了所有浏览器. 如果有问题的浏览器不是最新的, 然后，最好将视频编码为所有三种格式，并附带层叠的备选选项.

如果不能以不同格式编码视频, it’s best to detect the support, 这可以通过几种方式实现(参见 http://iberindia.com/demosite/html5/html5demo1.html)，并使用以下代码在屏幕上显示警报或消息:

取决于兼容html5的浏览器, 如果不支持video元素，这行代码应该自动返回到error函数.

浏览器之间的JavaScript兼容性也可能是一个问题. 就像一个设计良好的网站可以在任何浏览器中运行一样, HTML5设计人员应该注意代码经过良好测试，并在所有支持的浏览器中显示相同的结果.

For applying advanced features, such as playlists, subtitles, and sharing on social networks, 需要使用JavaScript和HTML进行进一步编程，直到视频元素发展到能够本地支持这一点. 请注意，即使是基本播放器的外观和感觉在每个浏览器中也可能有所不同.

视频元素带有标准控件，如播放、暂停和音量. 可以使用JavaScript和HTML自定义这些. 例如，使用以下代码，可以让一个无关的按钮播放视频:

如何仅使用开源来构建我的媒体体验?
对于许多组织来说，可能只需要使用开源技术. HTML5为这种可能性打开了大门. 最大的影响是H.通过MPEG LA向分销商和生产商收取版税. 另一种方法是对视频元素使用WebM或Ogg.

如何提供良好的用户体验?
为了获得良好的终端用户体验，分析观看人数并相应地规划视频元素是很重要的.

让我们从视频的大小开始. 在video元素中指定最初录制的视频的大小非常简单. 也可以通过指定一个新大小来缩小大小. However, 指定比原始尺寸更大的大小可能会导致缩放或信箱效果，这可能无法吸引查看者.

如果页面上的视频大小较大, 那么最好使用preload属性指定没有自动缓冲. 这允许在加载视频页面时节省带宽，而不是在加载页面后立即下载视频(如果视频是实时的), this doesn’t apply). 当页面的目的是始终显示视频时，进行预加载可能是有意义的. preload属性还提供了一些可以在HTML5规范中查看的其他选项:

如果一个站点只有一个视频，则可以指定loop属性来不间断地播放该视频.g.(公司网站上的公司视频). 这个属性会尝试下载视频，并在页面加载后立即播放.

Similarly, 如果视频需要在用户登陆页面时自动播放, 它可以使用autoplay属性来完成:

如果没有自动播放或预加载属性, 最好提供一个海报图像，直到视频开始播放. 这可以使用poster属性来完成:

尽管可以使用JavaScript对这些属性的行为进行编程, 将它内置于video元素中以避免JavaScript跨浏览器兼容性问题是很有用的.

该属性的类型指定视频的mime类型. 最好在这里提供尽可能多的细节，包括所使用的编解码器. If not, 一些浏览器将尝试下载并解码视频, 哪一种又可能是带宽密集型的，并导致巨大的延迟, 导致最终用户的糟糕体验.

Sample Demo Site
这个示例演示站点显示了三个VOD文件——webm、Ogg和MP4. 请注意，这些不是来自服务器的流，而是简单的托管. 然而，它确实根据屏幕描述了什么是可玩的. It is best to develop a unified player that falls back to Flash or Silverlight (this is not depicted in this demo site; there are several open source players and frameworks that exist today to allow just that).

下面是构建演示站点所采取的步骤 http://iberindia.com/demo site/html5/html5demo1.html.

•下载示例WebM、MP4和Ogg文件.
•如果只有一种编解码器格式可用，转码到其他格式.
• Create an HTML5 demo page.
•在不同的屏幕上进行测试，分析其行为、外观和感觉.

References

http://diveintohtml5.org

www.chromeexperiments.com

www.youtube.com/html5

http://dev.opera.com

www.apple.com/html5